<template>
    <div>
        <div class="box">

            <el-row :gutter="20">
                <el-col v-for="(item, index) in boxList" :key="index" :span="item.span">
                    <div class="box-box" :style="'background-color:' + item.backgroundColor">
                        <div>
                            <!-- <el-icon size="50"><Van /></el-icon> -->
                            <el-icon size="50">
                                <component :is="item.icon" />
                            </el-icon>
                        </div>

                        <div>
                            <div>{{ item.title }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="box">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>近7天销售额</span>
                    </div>
                </template>
                <div
                style="text-align:center;"
                >
                    <div style="height:30px"></div>
                    <el-icon
                    size="100"
                    ><DataLine /></el-icon>
                    <div style="height:30px"></div>
                    <div>暂无数据</div>
                    <div style="height:30px"></div>
                </div>

            </el-card>

        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

let boxList = ref([
    {
        span: 6,
        backgroundColor: '#26AAE3',
        icon: 'Van',
        title: '采购'
    },
    {
        span: 6,
        backgroundColor: '#28b878',
        icon: 'List',
        title: '销售订单'
    },
    {
        span: 6,
        backgroundColor: 'rgb(38, 170, 227)',
        icon: 'Platform',
        title: '前台收银'
    },
    {
        span: 6,
        backgroundColor: '#FFA71D',
        icon: 'Menu',
        title: '库存查询'
    },
]);


</script>

<style lang="scss" scoped>
.box {
    padding: 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}

</style>